<template>
	<view class="content">
		<view class="title">
			<!-- 	<view class="icon">
				<image src="https://wechat-pictures-1301970825.file.myqcloud.com/shop/note/hongbao2.png"></image>
			</view> -->
			累计获取奖励红包：{{count_data.moneySum/100}}元
		</view>
		<view class="title">
			<!-- 	<view class="icon">
				<image src="https://wechat-pictures-1301970825.file.myqcloud.com/shop/note/hongbao2.png"></image>
			</view> -->
			累计获取奖励积分：{{count_data.integralSum}}分
		</view>
		<scroll-view class="list" scroll-y="true" @scrolltolower="end">
			<view :class="item.isOver?'item hui':'item'" v-for="(item,index) in list" @click="info(item.noteId)">
				<view class="type-date">
					<view class="type">
						<view class="icon">
							<image mode="widthFix"
								:src="item.noteType==1?'https://wechat-pictures-1301970825.file.myqcloud.com/shop/note/341cc499-74a3-4141-871e-b32c386d2682.png':'https://wechat-pictures-1301970825.file.myqcloud.com/shop/note/4e728926-9034-42eb-aba2-491157a02cb1.png'">
							</image>
						</view>
						{{item.noteType==1?'直播打卡':'其它打卡'}}
					</view>
					<view class="date">上传时间：{{item.createTime}}</view>
				</view>
				<view class="item-content">
					<view class="content-item-title">{{item.title}}</view>
					<view class="content-item-mag">
						奖励:
						<text v-if="!item.integral && !item.moneyAmount">等待发放…</text>
						<text v-if="item.integral">{{item.integral}}积分</text>
						<text v-if="item.moneyAmount">{{item.moneyAmount/100}}元</text>
					</view>
				</view>
				<view class="jieshu" v-if="item.isOver">
					<image
						src="https://wechat-pictures-1301970825.file.myqcloud.com/shop/note/b2e653a7-4aca-4379-9389-eeb781035215.png">
					</image>
				</view>
			</view>
			<no_order title="暂无打卡笔记" v-if="!list[0]"></no_order>
		</scroll-view>
		<!-- 打卡详情 -->
		<view v-if="is_show" :class="info_show?'zhezhao zhezhao-show-true':'zhezhao zhezhao-show-false'"
			@click="info_show=!info_show"></view>
		<view v-if="is_show" :class="info_show?'info info-show-true':'info info-show-false'">
			<view class="titles">我的打卡记录<view class="info-x" @click="info_show=!info_show">
					<uni-icons type="closeempty"></uni-icons>
				</view>
			</view>
			<view class="name">{{info_list[0].title}}</view>
			<view class="info-list">
				<view class="info-item" v-for="(items,index) in info_list">
					<view class="imgs">
						<image
							:src="item.split('.')[item.split('.').length-1]=='mp4'?item.replace('.mp4','img.png'):item"
							v-for="(item,k) in items.imgs" @click="previewImg(items.imgs,k)"></image>
					</view>
					<view class="item-date">
						{{items.createTime}}
						<view class="count">第{{info_list.length-index}}次上传</view>
					</view>
					<view class="price">
						奖励:
						<text v-if="!items.integral && !items.moneyAmount">等待发放…</text>
						<text v-if="items.integral">{{items.integral}}积分</text>
						<text v-if="items.moneyAmount">{{items.moneyAmount/100}}元</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 视频预览 -->
		<view v-if="videoUrl" class="video" @click="videoUrl=''">
			<video :src="videoUrl" :controls="false" autoplay @play="playVedio()" @fullscreenchange="screenchange" id="videoId"></video>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info_show: false,
				is_show: false,
				count_data: {},
				FormData: {
					page: 1,
					pageSize: 10
				},
				count: 0,
				list: [],
				info_list: [],
				videoUrl: ""
			}
		},
		onLoad() {
			this.is_show = false
			this.list = []
			this.get_count()
			this.get_list()
		},
		methods: {
			info(id) {
				this.info_list = []
				this.is_show = true;
				this.info_show = true
				var data = {
					page: 1,
					pageSize: 100,
					noteId: id
				};
				var _this = this;
				_this.$NoteApi.doRequest("get", "note/customer/upload/list", data, "json").then(res => {
					var list = _this.info_list;
					list = list.concat(res.data.data.records);
					list.map((k, v) => {
						list[v].imgs = k.noteUrl.split(",")
					})
					_this.info_list = list;
				})
			},
			get_count() {
				var _this = this;
				this.$NoteApi.doRequest("get", "note/customer/award/sum", "", "json").then(res => {
					_this.count_data = res.data.data;
				})
			},
			get_list() {
				var data = this.FormData;
				var _this = this;
				_this.$NoteApi.doRequest("get", "note/customer/upload/list", data, "json").then(res => {
					var list = _this.list;
					list = list.concat(res.data.data.records);
					_this.list = list;
					_this.count = res.data.data.total;
				})
			},
			end() {
				// if(this.FormData.page*this.FormData.pageSize<this.count){
				this.FormData.page = this.FormData.page + 1;
				this.get_list()
				// }
			},
			//预览
			previewImg(imgUrl, index) {
				//预览视频
				if (imgUrl[index].split('.')[imgUrl[index].split('.').length - 1] == 'mp4') {
					this.videoUrl = imgUrl[index]
					return
				}
				// 预览图片
				uni.previewImage({
					current: index,
					urls: imgUrl,
					longPressActions: {
						// itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							//console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
		}
	}
</script>

<style>
	.hui {
		background-color: #E7E7E7 !important;
	}

	.content {
		box-sizing: border-box;
		padding: 18upx 24upx;
		width: 100%;
		height: 100vh;
		background-color: #F6F6F6;
		display: flex;
		flex-direction: column;
	}

	.title {
		width: 100%;
		display: flex;
		align-items: center;
		font-size: 28upx;
		color: #333;
		font-weight: 600;
	}

	.title .icon {
		width: 34upx;
		height: 40upx;
		margin-right: 14upx;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.list {
		width: 100%;
		flex: 1;
		margin-top: 20upx;
		overflow: auto;
	}

	.item {
		background-color: #fff;
		border-radius: 8upx;
		margin-bottom: 22upx;
		box-sizing: border-box;
		padding: 0upx 26upx;
		position: relative;
	}

	.item .type-date {
		width: 100%;
		display: flex;
		justify-content: space-between;
		border-bottom: 2upx solid #F6F6F6;
		height: 100upx;
		line-height: 100upx;
		box-sizing: border-box;
		font-size: 28upx;
		font-weight: 500;
	}

	.type {
		display: flex;
		align-items: center;
	}

	.type .icon {
		width: 30upx;
		height: 30upx;
		display: flex;
		align-items: center;
		margin-right: 20upx;
	}

	.item-content {}

	.item-content .content-item-title {
		box-sizing: border-box;
		padding: 20upx 0upx;
		font-size: 32upx;
		color: #333;
		font-weight: 600;
	}

	.content-item-mag {
		font-size: 32upx;
		color: #333;
		margin-top: 24upx;
		border-top: 2upx dashed #EFEFEF;
		line-height: 76upx;
	}

	.content-item-mag text {
		color: #FF7E2C;
	}

	.jieshu {
		position: absolute;
		width: 168upx;
		height: 168upx;
		bottom: 0upx;
		right: 0upx;
	}

	.zhezhao {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0upx;
		left: 0upx;
		background-color: #000;
		opacity: 0;

	}

	.zhezhao-show-true {
		animation: zhezhao-doanhua 1s forwards;
	}

	@keyframes zhezhao-doanhua {
		0% {}

		100% {
			opacity: 0.7;
		}
	}

	.zhezhao-show-false {
		animation: zhezhao-doanhua-show .7s forwards;
	}

	@keyframes zhezhao-doanhua-show {
		0% {
			opacity: 0.7;
		}

		59% {
			opacity: 0;
		}

		100% {
			z-index: -1;
		}
	}

	.info {
		width: 400upx;
		background-color: #fff;
		position: fixed;
		top: 100%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 16upx;
		box-sizing: border-box;
		padding: 44upx 60upx;
		overflow: hidden;
	}

	.info-show-true {
		animation: info-doanhua .6s forwards;
	}

	@keyframes info-doanhua {
		0% {}

		100% {
			top: 50%;
			width: 654upx;
		}
	}

	.info-show-false {
		animation: info-doanhua-show .8s forwards;
	}

	@keyframes info-doanhua-show {
		0% {
			top: 50%;
			width: 654upx;
		}

		100% {
			top: -100%;
			width: 400upx;
		}
	}

	.info .titles {
		width: 100%;
		font-weight: 600;
		font-size: 32upx;
		text-align: center;
		position: relative;
	}

	.info-x {
		width: 50upx;
		height: 50upx;
		position: absolute;
		top: 50%;
		right: 0upx;
		transform: translate(0%, -50%);
	}

	.name {
		font-size: 28upx;
		font-weight: 600;
		margin-top: 58upx;
	}

	.info-list {
		box-sizing: border-box;
		padding: 20upx 0upx;

		max-height: 700upx;
		overflow: auto;
	}

	.info-item {
		border-bottom: 2upx solid #EFEFEF;
		margin-bottom: 40upx;
	}

	.imgs {
		width: 100%;
		display: flex;
	}

	.imgs image {
		width: 124upx;
		height: 124upx;
		border-radius: 8upx;
		margin-right: 40upx;
	}

	.item-date {
		display: flex;
		justify-content: space-between;
		font-size: 28upx;
		color: #666666;
		margin: 20upx 0;
	}

	.price {
		font-size: 28upx;
		box-sizing: border-box;
		padding-bottom: 20upx;
	}

	.price text {
		font-weight: 600;
	}
	.video{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		background-color: #fff;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgb(0 0 0 / 46%);
	}
	.video video{
		width: 540upx;
		border-radius: 30upx;
	}
</style>
